import React, { Component } from 'react';

/*
  上下文进行后代传参：
  1. 创建一个上下文
  const TitleContext = React.createContext()
  2. 使用上下文对象中的 Provider 组件配合 value 属性进行值的传递
  <TitleContext.Provider value={'飞旺'}>
    <First title='卫龙' />
  </TitleContext.Provider>

  3. 类组件接收参数
    3.1 通过组件名接收 First.contextType = TitleContext
    3.2 通过静态属性进行接收 static contextType = TitleContext


  3. 函数式组件接收参数
    通过 TitleContext.Consumer 进行接收
    <TitleContext.Consumer>
        {(value)=>{
          // 4. 使用数据
          return (<>Section：{value}</>)
        }}
      </TitleContext.Consumer>
*/

// 1. 创建一个上下文对象
const TitleContext = React.createContext()

class First extends Component {

  // 3.2 通过静态属性来进行接收
  static contextType = TitleContext

  render(){
    return (<>
      <div>
        First： {this.props.title}
        <br />
        {/* 4. 使用接收过来的 context */}
        First： {this.context}

        <Section name={this.props.title} />
      </div>
    </>)
  }
}
// 3.1 通过组件名 .contextType 进行值的接收
// First.contextType = TitleContext

const Section = (props)=>{

  return (<>
    <div>
      Section：{props.name}
      <br />
      {/* 3. 通过 TitleContext.Consumer 组件进行数据的接收 */}
      <TitleContext.Consumer>
        {(value)=>{
          // 4. 使用数据
          return (<>Section：{value}</>)
        }}
      </TitleContext.Consumer>

    </div>
  </>)
}
// 函数式组件无法通过 .contextType 进行获取
// Section.contextType = TitleContext

class App extends Component {
  render() {
    return (
      <div>
        {/* 2. 使用上下文对象中的 Provider 组件，配合 value 属性进行值的传递 */}
        <TitleContext.Provider value={'飞旺'}>
          <First title='卫龙' />
        </TitleContext.Provider>

      </div>
    );
  }
}

export default App;
